package me.fung.rem.app.auth

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import me.fung.keen.app.view.View
import androidx.compose.runtime.*
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.unit.dp

class SignUpView : View<SignUpPresenter>() {
    @Composable
    override fun content(modifier: Modifier) {
        Box(modifier = modifier) {
            Column(modifier = Modifier.align(Alignment.Center)) {
                Column(
                    modifier = Modifier.width(IntrinsicSize.Min),
                    horizontalAlignment = Alignment.CenterHorizontally,
                ) {
                    body()
                }
                Text(text = "首次使用请先录入开门密码")
            }
        }
    }

    @Composable
    @OptIn(ExperimentalMaterialApi::class)
    private fun body() {
        val rp = remember { p }
        val focusRequester = remember { FocusRequester() }
        LaunchedEffect(Unit) {
            focusRequester.requestFocus()
        }
        Surface(
            modifier = Modifier.height(IntrinsicSize.Min).padding(vertical = 5.dp).fillMaxWidth(),
            shape = RoundedCornerShape(50),
        ) {
            TextField(
                value = rp.pwd,
                onValueChange = { rp.pwd = it },
                modifier = Modifier.focusRequester(focusRequester),
                placeholder = { Text("录入密码") },
                visualTransformation = PasswordVisualTransformation(),
                singleLine = true,
            )
        }

        Surface(
            modifier = Modifier.height(IntrinsicSize.Min).padding(vertical = 5.dp).fillMaxWidth(),
            shape = RoundedCornerShape(50),
        ) {
            TextField(
                value = rp.repeatPwd,
                onValueChange = { rp.repeatPwd = it },
                modifier = Modifier,
                placeholder = { Text("重复录入密码") },
                visualTransformation = PasswordVisualTransformation(),
                singleLine = true,
            )
        }

        CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
            Button(
                onClick = { rp.signUp() },
                modifier = Modifier.fillMaxWidth().padding(5.dp)
            ) {
                Text("注册")
            }
        }
    }
}
